<%@page import="java.sql.Timestamp"%>
<%@ page import="com.google.gson.*"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
String jqxPath = path + "/libs/kendo";

String title = application.getServletContextName();
String theme = (String) session.getAttribute("ApplicationTheme");
if (theme == null || theme.length() == 0) {
	//theme = "bootstrap";
	//theme = "default";
	//theme = "flat";
	//theme = "metro";
	theme = "metro-blue";
}
String locale = (String) session.getAttribute("locale");
if (locale == null || locale.length() == 0) { locale = "cs-CZ"; }

Map<String, Object> params = new HashMap<String, Object>();
Enumeration<String> e = request.getParameterNames();
while (e.hasMoreElements()) {
	String key = e.nextElement();
	params.put(key, request.getParameter(key));
}

String modulId = (String) params.get("modulId");

Gson gson = new Gson();
%>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=8" />
  
<link href="<%=jqxPath%>/styles/kendo.common.css" rel="stylesheet" type="text/css">
<link href="<%=jqxPath%>/styles/kendo.rtl.css" rel="stylesheet" type="text/css">
<link href="<%=jqxPath%>/styles/kendo.<%=theme%>.css" rel="stylesheet" type="text/css"> 
  
<link href="<%=path%>/libs/themes/<%=theme%>/easyui.css" rel="stylesheet" type="text/css">
<link href="<%=path%>/libs/themes/icon.css" rel="stylesheet" type="text/css">
<style type="text/css">
html, body {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	font-size: 11px;
	font-family: sans-serif, Helvetica, Verdana;
}
</style>

<script type="text/javascript" src="<%=path%>/libs/jquery-1.9.1.js"></script>
<script type="text/javascript" src="<%=path%>/libs/aciea.utils.js"></script>
<script type="text/javascript" src="<%=path%>/libs/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=jqxPath%>/kendo.web.js"></script>
<script type="text/javascript" src="<%=jqxPath%>/cultures/kendo.culture.cs-CZ.js"></script>
<script type="text/javascript">
kendo.culture("cs-CZ");

var schedulerResizeEnd = function(e) {
	var url = "<%=basePath%>CalendarConnector";
	var params = {
		uid: e.id,
		start: e.start,
		end: e.end
	};
	var result = executeAjaxSync(url, params);
	window.console && console.log("result: "+result);
};

</script>
</head>

<body>
	<div id="mainPanel" class="easyui-layout">
		<div id="toolBoxPanel" data-options="region:'west',border:true,title:'Kalendář'" style="width:200px; padding-top: 0px;">
			<div id="calendarMini" class="easyui-calendar" style="width:180px;height:180px;margin: 10px;"></div>
			<script type="text/javascript">
			$("#calendarMini").calendar({
				firstDay: 1,
				weeks: ["N","P","Ú","S","Č","P","S"],
				onSelect: function(date){
					//var view = $("#calendar").fullCalendar("getView");
					//$("#calendar").fullCalendar( "gotoDate", date.getFullYear(), date.getMonth(), date.getDate() );
				}
			});
			</script>	
			<div id="treeViewPanel" >
				<ul id="folderTree" class="easyui-tree"></ul>
			</div>
			<script type="text/javascript">
			</script>
		</div>	
		<div id="centerPanel" data-options="region:'center',border:true">
			<div id="scheduler"></div>
			<script type="text/javascript">
			var h = $(window).height() - 4; 
			var today = new Date();
			/*
			var dataSource = new kendo.data.SchedulerDataSource({
				batch: true,
				transport: {
					read: {
						type: "POST",
						dataType: "json",
						url: "/organizer/CalendarConnector?processId=selectMonth",
						contentType: "application/json; charset=utf-8",
						complete: function () {
							window.console && console.log("Tweak your UI here");
						}
			            
					},
					create: {
						type: "POST",
						url: "/organizer/CalendarConnector?processId=doAppend",
						dataType: "json"
					},
					update: {
						type: "POST",
						url: "/organizer/CalendarConnector?processId=doUpdate",
						dataType: "json"
					},
					destroy: {
						type: "POST",
						url: "/organizer/CalendarConnector?processId=doDelete",
						dataType: "json"
					},
					parameterMap: function (options, operation) {
						if (operation !== "read" && options.models) {
							switch (operation) {
							
							case "read":
								//window.console && console.log(""+kendo.stringify(options));
								var selectDate = $("#scheduler").data("kendoScheduler").date();
								var params = { date: kendo.stringify(selectDate), models: kendo.stringify(options.models) };
								return params;
								
							case "create":
								var params = { models: kendo.stringify(options.models) };
								return params; 
							case "update":
								var params = { models: kendo.stringify(options.models) };
								return params; 										
							case "destroy":
								var params = { models: kendo.stringify({ location: "", uid: options.models[0].id }) };
								return params;
							}
						}
					}
				},
				schema: {
					model: {
						id: "eventId",
						fields: {
							eventId: { from: "id" },
							title: { from: "subject" },
							start: { type: "date", from: "dateStart"},
							end: { type: "date", from: "dateEnd"},
							description: { from: "description" },
							//recurrenceId: { from: "RecurrenceID" },
							recurrenceRule: { from: "recRule" },
							//recurrenceException: { from: "recurrenceException" },
							atendees: { from: "atendees", nullable: true },
							isAllDay: { type: "boolean", from: "allDay" }
						}
					}
				},
				error: function(e) {
					//alert("error: "+e);
					this.cancelChanges(); 
				}   
			});
			*/
			$(function() {
				
				$("#scheduler").kendoScheduler({
					//autoBind: false,
					date: new Date(),
					startTime: new Date(<%=Timestamp.valueOf("2013-11-30 00:00:00").getTime()%>),
					endTime: new Date(<%=Timestamp.valueOf("2013-11-30 24:00:00").getTime()%>),
					//timezone: "Europe/Prague",
					workDayStart: new Date(<%=Timestamp.valueOf("2013-11-30 06:00:00").getTime()%>),
					workDayEnd: new Date(<%=Timestamp.valueOf("2013-11-30 20:00:00").getTime()%>),
					views: [{
						type: "day",
						title: "Den"
					}, {
						type: "week",
						selected: true, 
						title: "Týden"
					}, {
						type: "month",
						title: "Měsíc"
					}, {
						type: "agenda",
						title: "Agenda"
					}],
					messages: {
						allDay: "",
						today: "Dnes",
						cancel: "Zpět",
						date: "Datum",
						deleteWindowTitle: "Smazat záznem",
						destroy: "Smazat",
						event: "Událost",
						save: "Uložit",
						editor: {
							allDayEvent: "Celý den",
							description: "Popis",
							editorTitle: "Kalenář - Editace události",
							end: "Do",
							//endTimezone: "End date timezone"
							repeat: "Opakovat",
							//separateTimezones: "Set different start and end time zones"
							start: "Od",
							//startTimezone: "Start date timezone"
							//timezone: "Event timezone"
							//timezoneEditorTitle: "Timezones"
							title: "Událost"
						},
					    recurrenceEditor: {
					    	daily: {
					    		interval: " " + "den",							// "days(s)"
					    		repeatEvery: "Opakovat za" + ": "		// "Repeat on"
					    		//repeatOn: "repeat on: "
					    	},
					    	weekly: {
					    		interval: " " + "týden" + ".",					//" week(s)."
					    		repeatEvery: "Opakovat za" + ": ",				// "Repeat each: "
					    		repeatOn: "Opakovet v"+": ", 					//"repeat on: "
					    	},
					    	weekdays: {
					    		day: "Day",
					    		weekday: "Week day",
					    		weekend: "Week day"
					    	},
					    	monthly: {
					    		interval: " " + "měsíc" + ".",					// "month(s)"
					    		repeatEvery: "Opakovat za"+": ",				// "Repeat each: "					
					    		repeatOn: "Opakovet v"+": ",					//"repeat on: ",
					    		day: "den" + " "								// "day"
					    	},
					    	yearly: {
					    		interval: "" + "rok" + ".",						//" year(s).",
					    		repeatEvery: "Opakovat za"+": ",				//"Repeat each: ",
					    		repeatOn: "Opakovet v"+": ",					//"repeat on: ",
					    		of: " of "
					    	},
					    	end: {
					    		after: "Po" + " ",								// "after"
					    		occurrence: " " + "výskytech" + ".",			// "occurrence(s)"
					    		label: "konec: ",								// "end" 
					    		never: "Nikdy",									// "never"
					    		on: "Do"+" "									// "on"+" "
					    	},
					    	frequencies: {
					    		daily: "Denně",									// "daily"
					    		weekly: "Týdně", 								// "weekly"
					    		monthly: "Měsíčně",								// "monthly"
					    		yearly: "Ročně",								// "yearly"
					    		never: "Nikdy",									// "never"
					    	},
					    	offsetPositions: {
					    		first: "první", 								//"first",
					    		second: "druhý",								//"second",
					    		third: "třetí",									//"third",
					    		fourth: "čtvrtý",								//"fourth",
					    		last: "poslední",								//"last"
					    	}
						},
						recurrenceMessages: {
							deleteRecurring: "Chcete smazat pouze tuto událost nebo všechny události v sérii?", 
								//"Delete only this event occurrence or the whole series?",
							deleteWindowOccurrence: "Tuto událost",				//"Delete current event",
							deleteWindowSeries: "Všechny události",				//"Delete all occurrences",
							deleteWindowTitle: "Smazání opkování", 				//"Delete Recurring event",
							editRecurring: "Chcete změnit pouze tuto událost nebo všechny události v sérii?", 
								//"Do you want to edit only this event or the whole series?",
							editWindowOccurrence: "Tuto událost", 				//"Edit current event",
							editWindowSeries: "Všechny události", 				//"Edit all occurrences",
							editWindowTitle: "Editace opakování",				//"Edit Recurring Event"
						},
						views: {
							day: "Dnes",										// "Today"
							week: "Týden",										// "Weekly"
							month: "Měsíc",										// "Monthly"
							agenda: "Agenda" 									//"Events list"
						}
					},
					editable: {
						confirmation: "Přejete si smazat tuto položku?"
					},
					//resizeEnd: schedulerResizeEnd,
					/*
					save: scheduler_save,
					remove: scheduler_remove,
					edit: scheduler_edit,
					add: scheduler_add,
					cancel: scheduler_cancel,
					change: scheduler_change,
					moveStart: scheduler_moveStart,
					move: scheduler_move,
					moveEnd: scheduler_moveEnd,
					resizeStart: scheduler_resizeStart,
					resize: scheduler_resize,
					resizeEnd: scheduler_resizeEnd,
					navigate: scheduler_navigate, 

					sync: function() {
						this.read();
					},
					*/
					dataSource: { 
						
						batch: true,
						transport: {
							read: {
								type: "POST",
								dataType: "json",
								url: "/organizer/CalendarConnector?processId=selectMonth",
								contentType: "application/json; charset=utf-8",
								complete: function () {
									//window.console && console.log("");
								}
								/*
								$.ajax({
									url: "http://demos.telerik.com/kendo-ui/service/products",
									dataType: "json", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
									success: function(result) {
										// notify the data source that the request succeeded
										options.success(result);
									},
									error: function(result) {
										// notify the data source that the request failed
										options.error(result);
									}
								});										
								*/
							},
							create: {
								type: "POST",
								url: "/organizer/CalendarConnector?processId=doAppend",
								dataType: "json"
							},
							update: {
								type: "POST",
								url: "/organizer/CalendarConnector?processId=doUpdate",
								dataType: "json"
							},
							destroy: {
								type: "POST",
								url: "/organizer/CalendarConnector?processId=doDelete",
								dataType: "json"
							},
							parameterMap: function (options, operation) {
								if (operation !== "read" && options.models) {
									switch (operation) {
									
									case "read":
										//window.console && console.log(""+kendo.stringify(options));
										var selectDate = $("#scheduler").data("kendoScheduler").date();
										var params = { date: kendo.stringify(selectDate), models: kendo.stringify(options.models) };
										return params;
									case "create":
										var params = { models: kendo.stringify(options.models) };
										return params; 
									case "update":
										var params = { models: kendo.stringify(options.models) };
										return params; 										
									case "destroy":
										var params = { models: kendo.stringify({ location: "", uid: options.models[0].id }) };
										return params;
									}
								}
							}
						},
						schema: {
							model: {
								id: "eventId",
								fields: {
									eventId: { from: "id" },
									title: { from: "subject" },
									start: { type: "date", from: "dateStart"},
									end: { type: "date", from: "dateEnd"},
									description: { from: "description" },
									//recurrenceId: { from: "RecurrenceID" },
									recurrenceRule: { from: "recRule" },
									//recurrenceException: { from: "recurrenceException" },
									atendees: { from: "atendees", nullable: true },
									isAllDay: { type: "boolean", from: "allDay" }
								}
							}
						},
						error: function(e) {
							//alert("error: "+e);
							window.console && console.log("error: "+e.errors);
							this.cancelChanges(); 
						},
						/*
						filter: {
							: "or",
							filters: [
								{ field: "ownerId", operator: "eq", value: 1 },
								{ field: "ownerId", operator: "eq", value: 2 }
							]
						}
						*/
					},
					/*
					resources: [{
						field: "ownerId",
						title: "Owner",
						dataSource: [
							{ text: "Alex", value: 1, color: "#f8a398" },
							{ text: "Bob", value: 2, color: "#51a0ed" },
							{ text: "Charlie", value: 3, color: "#56ca85" }
						]
					}],
					*/
					footer: false,
					height: h
				});
			});
			</script>
		</div>
	</div>
	<script type="text/javascript">
	$("#mainPanel").layout({fit:true});
	</script>
</body>
</html>
